<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="board">
          <div class="board-pie-img">
            <img src="@/assets/images/home/statistical-board/pie.png" />
          </div>
          <div class="board-word">统计看板</div>
        </div>
        <el-button class="button" text
          ><img src="@/assets/images/home/statistical-board/drop.png"
        /></el-button>
      </div>
    </template>
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="审计人员情况" name="audit-personnel-situation"
          ><auditPersonnelSituationVue></auditPersonnelSituationVue
        ></el-tab-pane>
        <el-tab-pane label="审计计划" name="planning"><planningVue></planningVue></el-tab-pane>
        <el-tab-pane label="审计项目" name="audit-project"
          ><auditProjectVue></auditProjectVue
        ></el-tab-pane>
        <el-tab-pane label="整改问题" name="rectification-issues"
          ><rectificationIssuesVue></rectificationIssuesVue
        ></el-tab-pane>
        <el-tab-pane label="审计成果" name="audit-results"
          ><auditResultsVue></auditResultsVue
        ></el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
import auditPersonnelSituationVue from './echarts/audit-personnel-situation.vue';
import auditProjectVue from './echarts/audit-project.vue';
import auditResultsVue from './echarts/audit-results.vue';
import planningVue from './echarts/planning-echarts.vue';
import rectificationIssuesVue from './echarts/rectification-issues.vue';
export default {
  components: {
    auditPersonnelSituationVue,
    auditProjectVue,
    auditResultsVue,
    planningVue,
    rectificationIssuesVue,
  },
  data() {
    return {
      activeName: 'audit-personnel-situation',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.el-card__header) {
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  padding: 16px 0 16px 21px;
}
.board {
  display: flex;
  align-items: center;
  .board-pie-img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .board-word {
    font-weight: 700;
    font-size: 16px;
  }
}
:deep(.el-tabs__nav-wrap::after)  {
  background-color: #fff;
}
:deep(.demo-tabs)  {
  padding: 0;
}
:deep(.el-tabs__nav-wrap)  {
  margin: 10px 0 19px 31px;
}
:deep(.el-tabs__content) {
  padding: 0;
}
:deep(.demo-tabs)  > .el-tabs__content {
  font-size: 14px;
  color: #000;
  font-weight: 400;
}
</style>
